<!DOCTYPE html>
<html>
<head>
	<title>岩性识别</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="static/components/layout/fonts/icomoon/style.css">
	<link rel="stylesheet" href="static/components/layout/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/components/layout/css/style.css">
	<link rel="stylesheet" href="static/components/element-ui/theme-chalk/index.css">
	<style type="text/css">
	.el-tab-pane {
		min-height: 12rem;
	}
	.ipre {
		width: 100%;
    	height: 16rem!important;
    	border-radius: 0.25rem!important;
	}
	.el-tag {
		font-size: 16px!important;
		line-height: 32px!important;
	}
	/*@media (min-width:576px){ .container{ max-width:740px; }}*/
	/*@media (min-width:768px){ .container{ max-width:920px; }}*/
	@media (min-width:992px){ .container{ max-width:1260px!important; }}
	@media (min-width:1200px){ .container{ max-width:1440px!important; }}
	</style>
</head>
<body>
    
    <div id="app-container">
    	<div class="site-section bg-image" 
			style="background-image: url('static/images/home_bg.jpg')">
			<div class="container">
				<div class="row">
					<div class="col-md-5 mx-auto text-center align-self-center">
			        	<img src="static/images/logo.jpg" alt="Logo" 
			        		class="img-fluid w-50 rounded-circle"
			        		ondragstart="return false">
						<h1 class="font-weight-bold mb-0 text-white">看图识岩性</h1>
						<div class="row mb-5">
							<div class="col">
								<button class="btn btn-lg btn-info" @click="drawer = true">
									<span class="icon-upload mr-1"></span> 上  传
								</button>
								<button class="btn btn-lg btn-success" 
									:disabled="selected === '0'"
									@click="selected = '0'">
									<span class="icon-image mr-1"></span> 浏  览
								</button>
								<button class="btn btn-lg btn-warning" @click="handleDownload">
									<span class="icon-download mr-1"></span> 下  载
								</button>
							</div>
						</div>
					</div>
				</div>
				<div>
					<el-tabs 
						v-model="selected" 
						type="border-card">
						<el-tab-pane lazy>
							<span slot="label">
								<i class="icon-image"></i> 已识别记录
							</span>
							<div class="row">
								<div 
									class="col-lg-6" 
									v-for="(item, ind) in historys" 
									:key="item.id">
									<div class="row ml-1 mr-1">
										<div class="col-lg-6 text-center p-0">
											<el-image 
												:src="item.filepath"
												fit="cover"
												:lazy="ind > 10"
												:preview-src-list="[item.filepath]"
												class="ipre"></el-image>
										</div>
										<div class="col-lg-6 pr-0">
											<el-tag type="success">{{ item.predict }}</el-tag>
											<el-tag type="success">{{ item.category }}</el-tag>
											<span class="d-block">{{ item.describe }}</span>
										</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane lazy>
							<span slot="label">
								<i class="icon-image"></i> 人工鉴定记录
							</span>
							<div class="alert shadow rounded border-0 
								py-3 alert-info d-flex align-items-center" 
								role="alert">
								<span class="icon-message mr-2 h5 m-0 p-0"></span>
								<span class="text-uppercase small mr-4">Info:</span> 
								制作中......
							</div>
						</el-tab-pane>
						<el-tab-pane lazy>
							<span slot="label">
								<i class="icon-image"></i> 未能识别记录
							</span>
							<div class="alert shadow rounded border-0 
								py-3 alert-info d-flex align-items-center" 
								role="alert">
								<span class="icon-message mr-2 h5 m-0 p-0"></span>
								<span class="text-uppercase small mr-4">Info:</span> 
								制作中......
							</div>
						</el-tab-pane>
						<el-tab-pane lazy>
							<span slot="label">
								<i class="icon-image"></i> 当前上传记录
							</span>
							<div class="row">
								<div 
									class="col-lg-6" 
									v-for="(item, ind) in metadatas"
									:key="item.filepath">
									<div class="row ml-1 mr-1">
										<div class="col-lg-6 text-center p-0">
											<el-image 
												:src="item.filepath"
												fit="cover"
												:lazy="ind > 10"
												:preview-src-list="[item.filepath]"
												class="ipre"></el-image>
										</div>
										<div class="col-lg-6 pr-0">
											<div 
												v-for="(pred, pind) in item.predicts" 
												class="mb-2">
												<el-tag :type="item.id && pind === 0 ? 'success' : 'danger'">
													{{ pred.predict }} 
												</el-tag>
												<el-tooltip 
													:content="pred.describe"
													placement="top">
													<el-tag :type="item.id && pind === 0 ? 'success' : 'danger'">
														{{ pred.label }}
													</el-tag>
												</el-tooltip>
												<el-popover
													v-if="item.id && pind === 0"
													placement="right">
													<el-select 
												    	v-model="pred.category"
												    	@change="handleChange(\$event, item, pred)">
														<el-option-group
															v-for="group in labels"
															:key="group.label"
															:label="group.label">
														<el-option
															v-for="item in group.children"
															:key="item.value"
															:label="item.label"
															:value="item.value">
															<span style="float: left">{{ item.label }}</span>
			      											<span style="float: right; color: #8492a6; font-size: 13px;max-width: 300px;">{{ item.describe }}</span>
														</el-option>
														</el-option-group>
													</el-select>
													<i class="el-icon-edit" slot="reference"></i>
												</el-popover>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>

		<el-drawer 
			ref="drawer"
			:visible.sync="drawer" 
			:show-close="true "
			direction="ttb"
			size="50%">
			<div slot="title">
				<i class="icon-image"></i> 选择图片
			</div>
			<div class="m-3">
				<el-upload
					ref="upload"
					action="/upload"
					:on-success="handleSuccess"
					:multiple="true"
					accept="image/jpeg,image/png"
					list-type="picture-card">
					<i class="el-icon-plus"></i>
				</el-upload>
			</div>
		</el-drawer>
    </div>

	<script src="static/components/vue/vue.min.js"></script>
	<script src="static/components/element-ui/index.js"></script>
	<script src="static/components/axios.min.js"></script>
	<script src="static/components/index.js"></script>
</body>
</html>
